<template>
    <div class="home">
        <Banner />

        <div class="hot-list">
            <div class="h_title">
                <h3>热门推荐</h3>
            </div>
            <play-list :is_true="true" :num="6"></play-list>
            <!-- <PlayList /> -->
        </div>

        <div class="singer_list">
            <div class="h_title">
                <h3>热门歌手</h3>
            </div>
            <SingerList />
        </div>

        <div class="album_list">
            <div class="h_title">
                <h3>新碟上架</h3>
            </div>
            <!-- <album-list :albumList="album_list" :loading="album_loading" :num="album_count"></album-list> -->
            <AlbumList />
        </div>

        <div class='top_list'>
            <!-- <rank-list /> -->
            <RankList />
        </div>

        <div class='mv_list'>
            <div class="h_title">
                <h3>最新MV</h3>
            </div>
            <!-- <mv-list :mvList="mv_list" :loading="mv_loading" :num="mv_count"></mv-list> -->
            <MvList />
        </div>

    </div>
</template>

<script>
import Banner from './Banner.vue';
import PlayList from '@components/PlayList.vue';
import AlbumList from '@components/AlbumList.vue';
import MvList from '@components/MvList.vue';
import SingerList from '@components/SingerList.vue';
import RankList from '@views/index/RankList.vue';

export default {
    components: {
        Banner,
        PlayList,
        AlbumList,
        RankList,
        MvList,
        SingerList
    }
}
</script>
<style lang="less" scoped>
.h_title {
    padding: 20px 0 10px;

    h3 {
        display: inline-block;
        padding-right: 50px;
        font-size: 28px;
        font-weight: 700;
    }

    span {
        display: inline-block;
        font-size: 16px;
        margin: 0 40px 0 0;
        color: var(--color-text-main);
        cursor: pointer;

        &.active {
            position: relative;
            z-index: 1;
            font-weight: 600;
            color: var(--color-text-main);

            &:after {
                position: absolute;
                content: "";
                left: 0;
                bottom: 1px;
                width: 100%;
                height: 6px;
                background: var(--color-text-height);
                z-index: -1;
            }
        }
    }
}

.hot-list,
.album_list,
.mv_list,
.dj-list,
.artist-list,
.singer_list {
    padding: 0 20px;
    margin-bottom: 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 27px rgb(0 0 0 / 5%);
}

.top_list {
    margin-bottom: 25px;
}

.dj-artist {
    display: flex;
}

.dj-list {
    flex: 1;
    margin-right: 20px;
}

.artist-list {
    width: 440px;
}
</style>